<template>
  <div class="intelligent-assistant">
    <a-modal
      class="intelligent-assistant"
      wrapClassName="intelligent-assistant"
      width="60%"
      :open="open"
      :footer="null"
      title="智能助手"
      @ok="clickOk"
      @cancel="clickCancel"
    >
      <div class="message-box" id="scrollableContainer">
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">你好，我是您的智能助手</div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">请帮我查一下报表导出类有关文件</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
        <div class="item ai">
          <div v-if="true" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">
            好的，以下是有关“报表导出类有关文件”
            <br />
            这是测试这是测试这是测试这是测试，这是测试这是测试这是测试这是测试，这是测试这是测试这是测。
            这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试。
            这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试。
          </div>
        </div>
        <div class="item user">
          <div v-if="false" class="avatar">
            <SmileOutlined />
          </div>
          <div v-else class="avatar">A</div>
          <div class="message">好的，收到</div>
        </div>
      </div>
      <div class="input-box">
        <a-textarea
          class="input"
          placeholder="请输入"
          :auto-size="{ minRows: 1 }"
        ></a-textarea>
        <a-button type="primary">发送</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
// 引入组件
import { SmileOutlined } from '@ant-design/icons-vue'
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref, nextTick } from 'vue'
const props = defineProps({
  open: {
    default: false,
  },
})
const emits = defineEmits(['cancel'])
// 自定义状态
onMounted(() => {})
watch(
  () => props.open,
  () => {
    nextTick(() => {
      var container = document.getElementById('scrollableContainer')
      if (container) {
        container.scrollTop = container.scrollHeight
      }
    })
  },
  { deep: true, immediate: true }
)
// 自定义方法
//点击确定
const clickOk = () => {}
//点击取消
const clickCancel = () => {
  emits('cancel')
}
</script>
<style lang="less" scoped>
.intelligent-assistant {
  height: 200px;
  .message-box {
    padding: (24 / @vw);
    max-height: (680 / @vh);
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      display: flex;
      margin-bottom: (10 / @vh);
      .avatar {
        margin-right: (10 / @vw);
        width: (36 / @vw);
        height: (36 / @vw);
        border-radius: (36 / @vw);
        background-color: @tc;
        color: #fff;
        font-size: (18 / @vw);
        text-align: center;
        line-height: (36 / @vw);
      }
      .message {
        padding: (12 / @vw);
        max-width: 80%;
        background-color: rgba(229, 0, 39, 0.8);
        border-radius: (10 / @vw);
        border-top-left-radius: 0;
        color: #fff;
      }
    }
    .user {
      flex-direction: row-reverse;
      .avatar {
        margin-right: 0;
      }
      .message {
        margin-right: (10 / @vw);
      }
    }
  }
  .input-box {
    display: flex;
    .input {
      margin-right: (10 / @vw);
    }
  }
}
</style>
